【CSS】background-position - 背景画像の位置

CSSのbackground-positionプロパティについて解説します。

検証環境

CSS

macOS

14.1

background-position

background-positionは“背景画像の位置”のプロパティです。

位置はbackground-originからの相対位置になります。

基本構文

２パターンの構文があります。

値：１個

１個の値のみのパターンです。

background-position: 値;

値にはキーワード値または数値を定義します。

数値の場合、X座標は左からのオフセットになり、Y座標は中央です。

X座標とY座標の個別定義

background-position: 座標 座標;

座標は次のいずれかの形式です。

キーワード
キーワードオフセット
数値

X座標とY座標の順序はありませんが、いずれも数値の場合、１個目がオフセット（左）、２個目がオフセット（上）になります。

値

代表的な値は次の通りです。

値	軸	説明
top	Y（縦軸）	上
bottom	Y（縦軸）	下
left	X（横軸）	左
right	X（横軸）	右
center	X（横軸）・Y（縦軸）	中央
数値	X（横軸）・Y（縦軸）	相対位置

サンプル

値：１個（キーワード値）

sample.html

<style>
div {
    width: 250px;
    height: 250px;
    border: 1px solid black;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-position/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ____ih_hl_start
    background-position: top;
    ____ih_hl_end
}
</style>

<div></div>

プレビュー

値：１個（数値）

sample.html

<style>
div {
    width: 250px;
    height: 250px;
    border: 1px solid black;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-position/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ____ih_hl_start
    background-position: 20px;
    ____ih_hl_end
}
</style>

<div></div>

プレビュー

座標の個別定義（キーワード値）

sample.html

<style>
div {
    width: 250px;
    height: 250px;
    border: 1px solid black;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-position/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ___ih_hl_start
    background-position: bottom right;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

座標の個別定義（数値）

sample.html

<style>
div {
    width: 250px;
    height: 250px;
    border: 1px solid black;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-position/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ___ih_hl_start
    background-position: 20px 60px;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

座標の個別定義（片方のみオフセット）

sample.html

<style>
div {
    width: 250px;
    height: 250px;
    border: 1px solid black;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-position/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ___ih_hl_start
    background-position: bottom 10px right;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

座標の個別定義（両方オフセット）

sample.html

<style>
div {
    width: 250px;
    height: 250px;
    border: 1px solid black;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-position/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ___ih_hl_start
    background-position: right 70% bottom 30%;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー